<template>
    <div class="shape" v-loading="!inited">

        <div class="shape-scroller" @scroll="onScroll($event)">
            <ul>
                <li v-for="item in table" :key="item.id" @click="select = item" :class="{active: select && select.id == item.id}">
                    <figure>
                        <span v-for="model in item.design_model" :key="model.name">
                            <img v-lazy="$getImageUrl(model.mask_image)">
                        </span>
                    </figure>
                    <h3 v-text="item.name"></h3>
                    <p v-text="item.description"></p>
                    <CommonLevelDiscount  :price="item.price" :level="userInfo.level" type="unit|original|discount|icon" />
                </li>
            </ul>

            <div class="load-status" v-show="table.length > 0">
                <span v-if="status == 'loading'">-- Scroll to bottom load data --</span>
                <span v-if="status == 'waiting'">-- Loading --</span>
                <span v-if="status == 'nomore'">-- All data loaded --</span>
            </div>
        </div>
        <div class="shape-action">
            <button @click="onSelect()" type="primary" :disabled="disabled">Confirm</button>
        </div>
    </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
    name: "PackageShape",
    props: {
        shape: { type: Object, default: false },
    },
    data () {
        return {
            table: [],
            status: '',
            inited: false,
            form: {
                page_size: 20,
                page_num: 1,
            },
            cache: null,
            select: null,
        };
    },
    computed: {
        ...mapGetters("user", {
            userInfo: "getUserInfo",
        }),
        disabled () {
            if (!this.select) {
                return true;
            } else if (this.select.id == this.shape.active.id) {
                // 值相同
                return true;
            } else {
                return false;
            }
        }
    },
    methods: {
        // 保存或更新
        async getData () {
            const request = this.form

            this.status = 'loading';
            const response = await this.$http('BrandPackage.shape', request);
            if (response.code === 0) {

                const list = response.data || [];
                list.map(item => {
                    try {
                        item.design_piece = JSON.parse(item.design_piece);
                        item.design_model = JSON.parse(item.design_model);
                        item.design_model.map(i => i.mapping = JSON.parse(i.mapping))

                    } catch (error) {
                        console.log(error)
                    }
                })

                // 清空数据
                if (this.form.page_num == 1) {
                    this.table.splice(0, this.table.length);
                }
                this.inited = true;
                this.status = list.length < this.form.page_size ? "nomore" : "waiting";
                this.table.push(...list);
            } else {
                this.inited = true;
                this.$uxMessage.error(response.msg);
            }
        },
        onScroll (event) {
            if (this.status == "waiting") {

                const offset = 10;
                const target = event.target;
                const scrollHeight = target.scrollHeight;
                const scrollTop = target.scrollTop
                const clientHeight = target.clientHeight;

                if (scrollHeight - clientHeight - scrollTop < offset) {
                    this.status = "loading";
                    this.form.page_num += 1;
                    this.getData();
                }
            }
        },

        onSelect () {
            this.$emit('select', this.select);
        },
    },
    created () {
        this.getData();
        this.select = this.shape.active;
    },
};
</script>

<style lang="scss" scoped>
.shape {
    box-sizing: border-box;
    max-width: 1094px;
    min-width: 960px;
    width: calc(100vw - 152px);
    height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .shape-scroller {
        flex: 1;
        padding: 16px;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: auto;
        ul {
            display: flex;
            flex-wrap: wrap;
            flex: 1;
            align-items: flex-start;
        }

        li {
            width: calc(25% - 8px);
            margin: 12px 8px;
            position: relative;
            cursor: pointer;

            figure {
                box-sizing: border-box;
                // border: 12px solid transparent;
                display: flex;
                justify-content: center;
                background: #f0f0f0;
                border-radius: 6px;
                overflow: hidden;
                position: relative;

                &::before {
                    content: '';
                    width: 100%;
                    display: block;
                    padding-bottom: 100%;
                    background: url(https://img.podpartner.com/static/images-20230202/brand/package-model-select.png);
                    background-size: 100% 100%;
                }

                span {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    overflow: hidden;
                    img {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                    }

                    &:nth-child(n + 2) {
                        display: none;
                    }
                }
            }

            h3 {
                margin-top: 10px;
                min-height: 20px;
                font-size: 16px;
                color: #000000;
                font-weight: normal;
                line-height: 20px;
            }
            p {
                margin-top: 8px;
                min-height: 18px;
                font-size: 14px;
                color: #555555;
                line-height: 18px;
                white-space: pre-line;
            }

            .level-discount {
                display: block;
                margin-top: 8px;
                min-height: 18px;
                font-size: 14px;
                line-height: 18px;
            }

            &.active figure {
                box-shadow: 0 0 2px 2px #f6b2cd;
            }
        }
    }

    .load-status {
        height: 50px;
        line-height: 50px;
        text-align: center;
    }

    .shape-action {
        display: flex;
        justify-content: center;
        margin: 16px;
        button {
            width: 220px;
        }
    }
}
</style>
